<template>
  <div id="my">
    <div class="head">
      <i class="bg"></i>
      <div class="inner-info">
        <div class="logo">
          <img :src="userInfo.avatar" alt />
        </div>
        <div class="userInfo">
          <span class="name">{{userInfo.name}}</span>
          <span class="tel" v-if="userInfo.is_check == 1 &&  (rid != 3 && rid != 6 && rid != 12)">{{fullName}}</span>
          <span class="tel" v-else>{{showMobile}}</span>
          <strong class="tag" v-if="userInfo.is_check == 1 &&  (rid != 3 && rid != 6 && rid != 12)" >已实名验证</strong>
        </div>
      </div>
    </div>
    <div class="nav-lists">
      <!-- 我的信息设定 -->
      <div class="nav-item" @click="navMyInfo" v-if="rid != 1 && rid != 18 && rid != 19 && rid != 21">
        <div class="name">
          <img src="/static/images/my/person.png" alt="我的信息" />
          <span>我的信息设定</span>
        </div>
        <md-icon class="icon-right" name="arrow-right" size="lg"></md-icon>
      </div>
      <!-- 家属设定 -->
      <div class="nav-item" @click="navRelatives" v-if="rid == 2 || rid == 4 || rid == 5 || rid == 16 || rid == 17 || rid == 18 || rid == 19">
        <div class="name">
          <img src="/static/images/my/relative.png" alt="我的家属" />
          <span>家属租户设定</span>
        </div>
        <md-icon class="icon-right" name="arrow-right" size="lg"></md-icon>
      </div>
       <!-- 小区物业人员设定 -->
      <div class="nav-item" @click="navPropertyStaff" v-if="rid == 16">
        <div class="name">
          <img src="/static/images/my/relative.png" alt="小区物业人员设定" />
          <span>小区物业人员设定</span>
        </div>
        <md-icon class="icon-right" name="arrow-right" size="lg"></md-icon>
      </div>
       <!-- 小区业委会雇员设定 -->
      <div class="nav-item" @click="navCommitteeStaff" v-if="rid == 16 ">
        <div class="name">
          <img src="/static/images/my/relative.png" alt="小区业委会雇员设定" />
          <span>小区业委会雇员设定</span>
        </div>
        <md-icon class="icon-right" name="arrow-right" size="lg"></md-icon>
      </div>
      <!-- 房产产权 -->
      <div class="nav-item" @click="navHouseInfo" v-if="rid == 2">
        <div class="name">
          <img src="/static/images/my/house.png" alt="我的产权信息" />
          <span>我的产权信息</span>
        </div>
        <md-icon class="icon-right" name="arrow-right" size="lg"></md-icon>
      </div>
      <!-- 实名认证 -->
      <div class="nav-item" @click="navCardInfo" v-if="rid != 1 && rid != 18 && rid != 19 && rid != 21">
        <div class="name">
          <img src="/static/images/my/card.png" alt="实名认证" />
          <span>实名验证设置</span>
        </div>
        <md-icon class="icon-right" name="arrow-right" size="lg"></md-icon>
      </div>
      <!-- 参选履历  初选提名-->
      <div class="nav-item" @click="navExperience" v-if="rid == 2 || rid == 4 || rid == 5 || rid == 16 || rid == 17 || rid == 18 || rid == 19">
        <div class="name">
          <img src="/static/images/my/experience.png" alt="参选履历 |初选提名" />
          <span>我的参选履历</span>
        </div>
        <md-icon class="icon-right" name="arrow-right" size="lg"></md-icon>
      </div>
      <!-- 使用帮助 -->
      <div class="nav-item" @click="navHelp">
        <div class="name">
          <img src="/static/images/my/help.png" alt="使用帮助" />
          <span>软件使用帮助</span>
        </div>
        <md-icon class="icon-right" name="arrow-right" size="lg"></md-icon>
      </div>
    </div>
    <div class="copyright">
      <p>i业主服务</p>
      <p>厦门数字城市科技有限公司 版权所有</p>
      <p>© 闽ICP备19014664号</p>
    </div>
    <tabBar :currentIndex="currentIndex"></tabBar>
  </div>
</template>

<script>
import tabBar from "@/components/common/tabBar";
import { Icon, Dialog } from "mand-mobile";
export default {
  components: {
    tabBar,
    [Icon.name]: Icon,
    [Dialog.name]: Dialog
  },
  name: "my",
  data() {
    return {
      currentIndex: 4, //tabbar 值,
      rid: 1,//角色
      fullName: "",
      userInfo: {
        avatar: "/static/images/my/like.png"
      } //
    };
  },
  computed: {
    showMobile() {
      if (this.userInfo.mobile != undefined) {
        return this.userInfo.mobile.slice(0, 3) +
          "****" +
          this.userInfo.mobile.slice(7, 11);
      }
    }
  },
  methods: {
    // 个人信息
    navMyInfo() {
      this.$router.push({
        path: "/personal",
        query: { selTab: "p2" }
      });
    },
    // 家属
    navRelatives() {
      this.$router.push({
        path: "/relatives"
      });
    },
     // 小区业委会雇员设定
    navCommitteeStaff() {
      this.$router.push({
        path: "/committeeStaff"
      });
    },
     // 小区物业人员设定
    navPropertyStaff() {
      this.$router.push({
        path: "/propertyStaff"
      });
    },
    // 房产产权
    navHouseInfo() {
      this.$router.push({
        path: "/propertyList",
      });
    },
    // 实名认证
    navCardInfo() {
      this.$router.push({
        path: "/personal",
        query: { selTab: "p3" }
      });
    },
    //参选履历
    navExperience() {
      this.$router.push({
        path: "/experience"
      });
    },
    // 软件使用帮助
    navHelp() {
      this.$router.push({
        path: "/help"
      });
    },
  },
  created() {
    let _this = this;
    if(_this.$store.getters.getUserInfo.mobile == undefined){
          Dialog.confirm({
          title: "提示",
          content: "您还未注册，请先注册使用？",
          confirmText: "确定",
          onConfirm: () => {
            _this.$router.replace({
              path: "/index"
            });
          },
          onCancel: () => {
            _this.$router.replace({
              path: "/index"
            });
          }
        });
          return;
      }else {
        this.userInfo = this.$store.getters.getUserInfo;
        this.rid = this.$store.state.roleType.rid;
        this.fullName = this.$store.state.userInfo.full_name;
      }
      
  }
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
#my {
  padding-bottom: 120px;
  .head {
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
    height: 300px;
    background: #fff;
    &::before {
      content: "";
      display: block;
      position: absolute;
      bottom: 190px;
      left: 450px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba($color: #eee, $alpha: 0.2);
      z-index: 9;
    }
    &::after {
      content: "";
      display: block;
      position: absolute;
      bottom: 280px;
      left: 270px;
      width: 200px;
      height: 60px;
      border-radius: 100px;
      transform: rotate(45deg);
      background: rgba($color: #eee, $alpha: 0.2);
    }
    .bg {
      position: absolute;
      bottom: 0;
      display: block;
      width: 1500px;
      height: 500px;
      background: linear-gradient(90deg, $themeColor, #333);
      border-radius: 50%;
      &::before {
        content: "";
        display: block;
        position: absolute;
        bottom: 190px;
        left: 80px;
        width: 500px;
        height: 60px;
        border-radius: 50px;
        transform: rotate(45deg);
        background: rgba($color: #eee, $alpha: 0.2);
      }
      &::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 280px;
        left: 270px;
        width: 200px;
        height: 80px;
        border-radius: 100px;
        transform: rotate(45deg);
        background: rgba($color: #eee, $alpha: 0.2);
      }
    }
    .inner-info {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      width: calc(100% - 100px);
      height: 80%;
      padding: 0 50px;
      .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 150px;
        background: #fff;
        overflow: hidden;
        border-radius: 50%;
        img {
          height: 100%;
        }
      }
      .userInfo {
        display: flex;
        flex-direction: column;
        color: #fff;
        margin-left: 40px;
        .name {
          font-size: 40px;
          line-height: 50px;
          margin-top: 14px;
          margin-bottom: 14px;
        }
        .tag {
            color: $themeGold;
            border: 1px solid $themeGold;
            font-size: 22px;
            padding: 12px 10px;
            border-radius: 50px;
            margin-top: 15px;
            text-align: center;
          }
        .tel {
          font-size: 30px;
          line-height: 30px;
          color: #eee;
        }
      }
    }
    .icon-right {
      position: absolute;
      right: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      width: 100px;
      height: 100px;
      font-size: 38px;
    }
  }
  .nav-lists {
    width: 100%;
    background: #fff;
    padding-top: 30px;
    box-shadow: 0 1px 20px #eee;
    .nav-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 40px;
      height: 100px;
      border-bottom: 1px solid #eee;
      &:last-child {
        border: none;
      }
      .name {
        display: flex;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
          margin-right: 20px;
        }
        span {
          font-size: 28px;
          color: #333;
        }
      }
      .icon-right {
        color: #666;
        font-size: 28px;
      }
    }
  }
  .copyright {
    margin-top: 40px;
    p {
      text-align: center;
      font-size: 20px;
      color: #999;
      margin-top: 10px;
    }
  }
}
</style>
